[{"id":"f46acb36.f9534","type":"template","z":"512e2cc3.3a1bdc","name":"Live Data","field":"payload.body","fieldType":"msg","format":"html","syntax":"mustache","template":"\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js\" type=\"text/javascript\"></script>\n\n<script>\nvar readings = {};\nvar mygauges = {};\n</script>\n\n<style>\n\n\n/*body {*/\n/*  background-color: rgba(0,0,0,0.8);*/\n/*  color: #999;*/\n/*}*/\n\n/*section {*/\n/*  background-color: rgba(0,0,0,0);*/\n/*  color: #999;*/\n/*}*/\n\n.tt {\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  border-collapse: collapse;\n  width: 100%;\n}\n\n.tt td, #customers th {\n  border: 1px solid #ddd;\n  padding: 2px 2px 2px 2px;\n}\n\n.tt tr:nth-child(even){background-color: #f2f2f2;}\n\n.tt tr:hover {background-color: #ddd;}\n\n.tt th {\n  padding: 2px;\n  text-align: left;\n  background-color: #303c43;;\n  color: white;\n}\n</style>\n\n\n{{{gauges}}}\n\n\n<script type=\"text/javascript\">\n\nvar a = new Date();\n \t\t\n// Create a client instance\n//client = new Paho.MQTT.Client(\"hw3.ddns.net\", Number(8083), \"cl\"+a.getTime());\nclient = new Paho.MQTT.Client(\"hw1.ddns.net\", Number(8081), \"cl\"+a.getTime());\n\nclient.onConnectionLost = onConnectionLost;\nclient.onMessageArrived = onMessageArrived;\n\n\nclient.connect({onSuccess:onConnect, userName:'demo', password:'demo', useSSL:true});\n\nfunction onConnect() {\n  // Once a connection has been made, make a subscription and send a message.\n  console.log(\"onConnect\");\n  client.subscribe(\"demo/boilers/#\"); // hw/diversitydemo/+/+/fC    //  ihiu/oop7zooR/#\n \n}\n\n// called when the client loses its connection\nfunction onConnectionLost(responseObject) {\n  if (responseObject.errorCode !== 0) {\n    console.log(\"onConnectionLost:\"+responseObject.errorMessage);\n}\n}\n\n\nvar peakTot = 0;\nvar peakTotNo = 0;\nvar peakInd = 0;\n\n// called when a message arrives\nfunction onMessageArrived(message) {\n  console.log(\"onMessageArrived:\"+message.payloadString);\n     \n      \n      var ttt = new Date().getTime();\n      \n      var topics = message.destinationName.split(\"/\");\n      var devid = topics[2];\n      var dkey = topics[4];\n      \n      var myid = 'gauge_'+devid+'.'+topics[3]+'.'+topics[4];\n      \n      if(!readings[devid]) {  // if new system add to plot\n    \n        readings[devid] = {};\n        \n        var node = document.createElement(\"div\");                 // Create a <li> node\n                // Create a text node\n        node.setAttribute(\"id\", \"dpanel_\"+devid); \n        node.setAttribute(\"class\", \"dpanel\"); \n        \n        \n        var gg = '<b>'+ devid+'</b>\\n';\n        \n        node.innerHTML = gg; \n        // Append the text to <li>\n        document.getElementById(\"mqpanels\").appendChild(node);     // Append <li> to <ul> with id=\"myList\" \n \n      } \n      \n    if(!readings[devid][topics[3]]) {  // if new system add to plot\n        \n        readings[devid][topics[3]] = {};\n            \n     } \n    \n    \n    \n    if(!readings[devid][topics[3]][topics[4]]) { \n        \n        readings[devid][topics[3]][topics[4]] =  { \"id\": readings.length - 1, \"topic\": message.destinationName, \"value\": message.payloadString, \"timestamp\":ttt};\n    \n    \n          \n        var node = document.createElement(\"div\");                 // Create a <li> node\n                // Create a text node\n        node.setAttribute(\"id\", \"gpanel_\"+devid); \n        \n        //node.setAttribute(\"style\", \"display:none;\");\n        \n        //var newid = 'gauge_'+devid+'.'+topics[3]+'.'+topics[4];\n        var newdes = devid+' / '+topics[3]+' / '+topics[4];\n        \n        var gg = '<div class=\"wrapper\">\\n';\n        gg += '<div id=\"'+myid+'\" class=\"gauge-container\"><br /><br />\\n';\n        gg += '    <span class=\"label\">'+newdes+'</span>\\n';\n        gg += '  <span class=\"value-text units\">&deg;C</span></div>\\n';\n        \n        \n        node.innerHTML = gg; \n        \n         \n        // Append the text to <li>\n        document.getElementById(\"dpanel_\"+devid).appendChild(node);     // Append <li> to <ul> with id=\"myList\" \n        \n           \n        mygauges[myid] = Gauge(\n            document.getElementById(myid), {\n            max: 100,\n            dialStartAngle: 180,\n            dialEndAngle: 0,\n            value: parseFloat(message.payloadString),\n            label: function(value) {\n              return (Math.round(value * 10) / 10);\n            },\n            color: function(value) {\n                if(value < 30) {\n                  return \"#0059b3\";\n                }else if(value < 40) {\n                  return \"#3399ff\";\n                }else if(value < 50) {\n                  return \"#fffa50\";\n                }else if(value < 65) {\n                  return \"#f7aa38\";\n                }else {\n                  return \"#ef4655\";\n                }\n              }\n          }\n        );\n\n        \n        \n        //document.getElementById(\"gpanel_\"+devid).fadeIn();\n        \n    } else {\n        \n      \n        readings[devid][topics[3]][topics[4]][\"value\"] =  message.payloadString;\n        readings[devid][topics[3]][topics[4]][\"timestamp\"] =  ttt;\n        \n        mygauges[myid].setValueAnimated(parseFloat(message.payloadString), 1);\n            \n     } \n      \n    \n    \n    // var tno = 0;\n    // var curTot = 0;\n    // var curTotNo = 0;\n    \n    // for (var mqt in readings) {\n        \n    //         var v = parseFloat(readings[mqt][\"payload\"]);\n        \n    \t\t\n    // \t\ttno++;\n    \t\t\n    // \t\tif (v > 0.2) { curTotNo++;  curTot = curTot+v; }\n    \t\t\n    // \t\tif (v >  peakInd) { peakInd = v;  }\n    // }\n    \n    \n    // if (curTot > peakTot) { peakTot = curTot;  peakTotNo=curTotNo;  }\n    \n    // document.getElementById(\"tno\").innerHTML = parseInt(tno*10)/10;\n    // document.getElementById(\"curTot_t\").innerHTML = parseInt(curTot*10)/10;\n    // document.getElementById(\"curTotNo_t\").innerHTML = parseInt(curTotNo*10)/10;\n    // document.getElementById(\"peakInd_t\").innerHTML = parseInt(peakInd*10)/10;\n    // document.getElementById(\"peakTot_t\").innerHTML = parseInt(peakTot*10)/10;\n    // document.getElementById(\"peakTotNo_t\").innerHTML = parseInt(peakTotNo*10)/10;\n\n  \n//     var sortable = [];\n// \tfor (var mqt in readings) {\n// \t\tsortable.push([mqt]);\n// \t}\n\n// \tsortable.sort(function(a, b) {\n// \t\treturn a[0] > b[0];\n// \t});\n  \n  \n  \n// \tvar mql = '<table class=\"tt\"><tr><th align=\"left\">Topic</th><th>Data</th></tr>';\n\t\n// \tfor (var dev in readings) {\n// \t    for (var grp in readings[dev]) {\n//     \t\tfor (var k in readings[dev][grp]) {\n//         \t\t//var k = sortable[kk][0];\n//         \t\tmql += \"<tr><td>\" + readings[dev][grp][k][\"topic\"].replace(/\\//g,\" / \") + \"</td><td>\" + readings[dev][grp][k][\"value\"] + \"</td></tr>\";\n//     \t    }\n// \t    }\n// \t}\n// \tmql += \"</table>\";\n\t\n\t\n// \tdocument.getElementById(\"mqlist\").innerHTML = mql;\ndocument.getElementById(\"mqlist\").innerHTML = \"\";\n  \n}\n\n\n\n\n</script>\n\n\n\n<!--<script src=\"/includes/chart.js/Chart.min.js\"></script>-->\n<!--<script src=\"/includes/chart.js/utils.js\"></script>-->\n\n<!--<style>-->\n<!--    canvas {-->\n<!--        -moz-user-select: none;-->\n<!--        -webkit-user-select: none;-->\n<!--        -ms-user-select: none;-->\n<!--    }-->\n<!--</style>-->\n\n\n<!-- <section style=\"height: 100vh; background: #cbced8\"> -->\n\n<!-- <p>This page recieves real-time tap use data, showing flow rates in each property as well as delivery temperatures.  -->\n\n<!--<table width=\"100%\"><tr><td>-->\n   \n     \n<!--<div id=\"canvas-holder\" style=\"width:100%;\">-->\n<!--    <canvas id=\"chart-area\"></canvas>-->\n<!--</div>-->\n\n<!-- </td><td width=\"30%\" valign=\"top\">-->\n\n<!--      <table class=\"table\">-->\n<!--          <tr><td width=\"50%\">Number of Systems</td><td><span id=\"tno\">0</span></td></tr>-->\n<!--          <tr><td width=\"50%\">Current Total Flow</td><td><span id=\"curTot_t\">0.0</span> ltr/min (<span id=\"curTotNo_t\">0</span> running)</td></tr>-->\n<!--          <tr><td width=\"50%\">Peak Total Flow</td><td><span id=\"peakTot_t\">0.0</span> ltr/min (<span id=\"peakTotNo_t\">0</span> running)</td></tr>-->\n<!--          <tr><td width=\"50%\">Peak Individual Flow</td><td><span id=\"peakInd_t\">0.0</span> ltr/min</td></tr>-->\n          \n          \n          \n<!--          </table>-->\n \n<!--</td></tr></table>-->\n\n<!-- <button id=\"randomizeData\">Randomize Data</button>\n<button id=\"addData\">Add Data</button>\n<button id=\"removeData\">Remove Data</button> -->\n\n<!--{{{p1}}}-->\n<!--{{{p2}}}-->\n<!--{{{p3}}}-->\n<!--{{{p4}}}-->\n\n\n<div id=\"mqlist\">\n Waiting for data...\n</div>\n<div id=\"mqpanels\">\n</div>\n\n<br /><br /><br /><br /><br /><br />&nbsp;<br />\n\n\n\n</body>\n\n</html>","output":"str","x":580,"y":1860,"wires":[["a162a3fd.a15248"]]},{"id":"3bbeb937.1f64ce","type":"inject","z":"512e2cc3.3a1bdc","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"{\"title\":\"Live Data\",\"subtitle\":\"Real-time tap flow rates at one second resolution.\",\"body\":\"\"}","payloadType":"json","x":250,"y":1860,"wires":[["f7c57a8b.731a78"]]},{"id":"a162a3fd.a15248","type":"change","z":"512e2cc3.3a1bdc","name":"","rules":[{"t":"set","p":"sections.livedata","pt":"global","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":800,"y":1860,"wires":[[]]},{"id":"f7c57a8b.731a78","type":"template","z":"512e2cc3.3a1bdc","name":"Gauges","field":"gauges","fieldType":"msg","format":"handlebars","syntax":"plain","template":"<script src=\"/includes/gauge.js\"></script>\n{{!--<script src=\"/includes/gauge.js\" type=\"text/javascript\" charset=\"utf-8\"></script>--}}\n<style>\n    \n/*    body {*/\n/*  background-color: rgba(0,0,0,0.8);*/\n/*  color: #999;*/\n/*}*/\n\n\n/* ------ Default Style ---------- */\n.gauge-container {\n  width: 180px;\n  height: 170px;\n  display: block;\n  float: left;\n  padding: 10px;\n  background-color: #222;\n  margin: 7px;\n  border-radius: 3px;\n  position: relative;\n  color: #dddddd;\n}\n.gauge-container > .label {\n  position: absolute;\n  right: 0;\n  top: 0;\n  display: inline-block;\n  background: rgba(0,0,0,0.5);\n  font-family: monospace;\n  font-size: 0.8em;\n  padding: 5px 10px;\n  width: 100%;\n  height: 40px;\n  color: #ffffff;\n  line-height: 100%;\n}\n.gauge-container > .gauge .dial {\n  stroke: #334455;\n  stroke-width: 10;\n  stroke-dasharray: 11.7 1;\n}\n.gauge-container > .gauge .value {\n  stroke: orange;\n  stroke-dasharray: none;\n  stroke-width: 13;\n}\n.gauge-container > .gauge .value-text {\n  fill: #ccc;\n  font-family: sans-serif;\n  font-weight: bold;\n  font-size: 0.8em;\n}\n\n.gauge-container > .units {\n  position: absolute;\n  left: 15px;\n  top: 45px;\n  fill: #ccc;\n  font-size: 1em;\n}\n\n\n\n/* ------- Alternate Style ------- */\n.wrapper {\n  height: 170px;\n  float: left;\n  margin: 1px;\n  overflow: hidden;\n}\n\n.dpanel {\n  height: 250px;\n  float: left;\n  margin: 2px;\n  width: 400px;\n  /*overflow: hidden;*/\n}\n\n.wrapper > .gauge-container {\n  margin: 0;\n}\n\n\n\n</style>\n","output":"str","x":400,"y":1860,"wires":[["f46acb36.f9534"]]}]